<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-7 作用域插槽</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- <child></child> -->
        <child>
            <template slot-scope="props">
                <h1>{{props.item}}</h1>
            </template>
        </child>
    </div>

    <script>
        Vue.component('child', {
            data() {
                return {
                    list: [1, 2, 3, 4]
                }
            },
            // template: `
            //     <div>
            //         <ul>
            //             <li v-for="item of list">
            //                 {{item}}
            //             </li>    
            //         </ul>
            //     </div>
            // `
            template: `
                <div>
                    <ul>
                        <slot v-for="item of list" :item=item></slot>    
                    </ul>    
                </div>
            `
        })
        var vm = new Vue({
            el: "#root",
        })
    </script>
</body>

</html>